---
title: React Lists - Flowbite
description: Use the list component to show an unordered or ordered list of items based on multiple styles, layouts, and variants built with Tailwind CSS and Flowbite
---

Get started with a collection of list components built with Tailwind CSS for ordered and unordered lists with bullets, numbers, or icons and other styles and layouts to show a list of items inside an article or throughout your web page.

Start using the list component by first importing it from Flowbite React:

```jsx
import { List } from "flowbite-react";
```

## Default list

Use this example to create a default unordered list of items using the `List` component with `List.Item` child components inside of it.

<Example name="list.root" />

## Icons

This example can be used to apply custom icons instead of the default bullets for the list items.

<Example name="list.icon" />

## Nested

Use this example to nest another list of items inside the parent list element.

<Example name="list.nested" />

## Unstyled

Use the `unstyled` prop to disable the list style bullets or numbers.

<Example name="list.unstyled" />

## Ordered list

Use the `ordered` prop tag to create an ordered list of items with numbers.

<Example name="list.ordered" />

## Advanced layout

This example can be used to show more details for each list item such as the user's name, email and profile picture.

<Example name="list.advanced" />

## Horizontal list

Use this example to create a horizontally aligned list of items.

<Example name="list.horizontal" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="list" />

## References

- [Flowbite List](https://flowbite.com/docs/typography/list/)
